import { ModalForm, ProFormDigit, ProFormText, ProFormTextArea } from '@ant-design/pro-components';
import * as React from 'react';
import { useRef } from 'react';
import type { ProFormInstance } from '@ant-design/pro-components';
import { useAsyncEffect } from 'ahooks';
import { message } from 'antd';
import { postRoomTypeEdit } from '../request';
import type { GithubIssueItem } from '../Room';
import {  useIntl } from '@umijs/max';
const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

const RoomTypeModal = (props: {
  visible: boolean;
  id: number;
  info: GithubIssueItem | null;
  onCancel: () => void;
  done: () => void;
}) => {
  /**
   * visible:控制弹窗显示与隐藏
   * id:判断是否为修改---有id则为修改操作，无则为新增操作
   * onCancel：取消操作关闭弹窗
   * done：父组件重新获取最新表格数据
   * info：当为修改弹窗时，传过来的表单数据
   */
  const { visible, id, onCancel, done, info } = props;

  const intl = useIntl()

  // 表单操作源
  const formRef = useRef<ProFormInstance>(null);

  // 表单项布局
  const formItemLayout = {
    labelCol: { span: 4 },
  };

  // 修改弹框时，将传递过来的数据赋值给表单
  useAsyncEffect(async () => {
    await waitTime(50);

    if (visible && id) {
      if (info) {
        formRef?.current?.setFieldsValue({
          name: info.name,
          price: info.price,
          area: Number(info.area),
          remark: info.remark,
        });
      }
    }
  }, [visible, id]);

  // 完成--提交表单数据上传
  const onFinish = async (values: GithubIssueItem): Promise<boolean> => {
    await waitTime(500);
    const res: any = await postRoomTypeEdit({
      ...values,
      id: id ? id : 0,
    });
    if (res.code !== 0) return message.error(res.msg);
    message.success(res.msg);
    onCancel();
    done();
    return true;
  };

  return (
    <ModalForm<GithubIssueItem>
      {...formItemLayout}
      layout={'horizontal'}
      formRef={formRef}
      open={visible}
      title={id ? intl.formatMessage({id:"FixLock.Modify the room type"}) : intl.formatMessage({id:"FixLock.New room type"})}
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
        onCancel: () => onCancel(),
      }}
      submitTimeout={2000}
      onFinish={(values) => onFinish(values)}
      width={'500px'}
    >
      <div style={{ marginTop: '40px' }}></div>
      <ProFormText
        width="md"
        name="name"
        label={intl.formatMessage({id:"FixLock.Room type name"})}
        placeholder={intl.formatMessage({id:"FixLock.Please enter room type"})}
        rules={[{ required: true, message: intl.formatMessage({id:"FixLock.Please enter room type"}) }]}
      />
      <ProFormDigit
        width="md"
        name="price"
        label={intl.formatMessage({id:"FixLock.Price"})}
        addonAfter={intl.formatMessage({id:"FixLock.Dollar"})}
        placeholder={intl.formatMessage({id:"FixLock.Please enter the price"})}
        rules={[{ required: true, message: intl.formatMessage({id:"FixLock.Please enter the price"}) }]}
      />
      <ProFormDigit
        width="md"
        name="area"
        label={intl.formatMessage({id:"FixLock.Room size"})}
        addonAfter="m²"
        placeholder={intl.formatMessage({id:"FixLock.Please enter the Room size"})}
        rules={[
          { required: true, message: intl.formatMessage({id:"FixLock.Please enter the Room size"})},
          { type: 'number', message: intl.formatMessage({id:"FixLock.Please enter a number"})},
        ]}
      />
      <ProFormTextArea
        name="remark"
        width="md"
        label={intl.formatMessage({id:"FixLock.remark"})}
        placeholder={intl.formatMessage({id:"FixLock.Please enter the room type remark."})}
        // rules={[{ required: true, message: '请输入房型备注' }]}
      />
    </ModalForm>
  );
};

export default RoomTypeModal;
